<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">
		<title>商品展示</title>
    </head>
	    
	
	
	<body>
		
		<div id="app">
			<!-- <input type="text"  v-model="inputData" /> -->
			ID:<input disabled="disabled"  v-model="user.id"/>
			姓名:<input  type="text" v-model="user.name"/> 
			性别:<input  type="text"  v-model="user.sex"/> 
			年龄:<input  type="text" v-model="user.age" />
			<button  @click="updateEntrue">确定修改</button>
			<hr />
			
			<table  border="1"  width="700px"  align="center"  id="form1">
				 <tr>
					 <th colspan="6"><h1>表格数据</h1></th>
				 </tr>
				 <tr  align="center">
					 <td>ID编号</td>
					 <td>名称</td>
					 <td>年龄</td>
					 <td>性别</td>
					 <td>修改操作</td>
					 <td>删除操作</td>
					 <td>添加操作</td>
				 </tr>
				 <tr  v-for="(item,index)  in  userList"  align="center">
					 <td   v-text="item.id"  ></td>
					 <td  v-text="item.name"></td>
					 <td  v-text="item.age"></td>
					 <td  v-text="item.sex"></td>
					 <td  ><button  @click="updateUser(item)">修改</button></td>
					 <td  ><button  @click="deleteUser(item.id)">删除</button></td>
					 <td  ><button @click="">添加</button></td>
				</tr>
			</table>
		</div>
		<!--导入axios.js-->
		<script  src="js/axios.js"></script>
		<!--导入vue.js-->
		<script  src="js/vue.js"></script>
		
		<script>
			
			axios.defaults.baseURL="http://localhost:8080";
			const  app=new Vue({
				   el: "#app",
				   data: {
					   userList: "AAA",
					   user: {
						   id: "",
						   name: "",
						   sex: "",
						   age: ""
					   }
				   },
				   methods:{
					   
					   //获取所有的列表的信息
						getUserList(){
							axios.get("/user/list").then(result => {
								   this.userList=result.data;
							})
						},
						
						//删除的操作
						deleteUser(id){
							axios.delete("/user/delete/"+id).then(result => {
								  this.getUserList();
							})
						},
						updateUser(value){
							this.user.id=value.id;
							this.user.name=value.name;
							this.user.sex=value.sex;
							this.user.age=value.age;
						},
						updateEntrue(){
						    axios.put("/user/update/",{
								    id: this.user.id,
									name: this.user.name,
									sex: this.user.sex,
									age: this.user.age
								
							}).then(result => {
								  this.getUserList();
							})
						}
				   },
				   mounted() {
				   	    this.getUserList();
				   }
				   
				
			})
			
			//getList的方式发送请求
			// axios.get("http://localhost:8080/user/list").then(result => {
			// 	  console.log(result);
			// })
			
			
			//delete的方式发送请求
			// axios.delete("http://localhost:8080/user/delete/227").then(result => {
			// 	  console.log(result);
			// })
			
			//对象的方式提交
			// axios.post("http://localhost:9999",{
			// 	      name: "白骨精",
			// 		  age : 20000,
			// 		  sex: "男"
			// }).then(result =>{
			// 	console.log("添加成功");
			// })
			
			
			// axios.defaults.baseURL="http://localhost:8080";
			// //put的方式
			// axios.put("/user/update/12/诸葛孔明").then(result =>{
			// 	console.log("添加成功");
			// })
			
			
			
			//restful风格的post请求
			// let  params=new  URLSearchParams();
			// params.append("name","蝎子精");
			// params.append("sex",700);
			// params.append("sex","女");
			
			
		</script>
	</body>
</html>
